<template>
  <div>
    <!-- 加载loading展示 -->
    <loading v-show="isShowLoading" />
    <div id="detail" v-show="!isShowLoading">
      <NavBar class="detail-nav">
        <div slot="left" @click="backclick()">
          <i class="mdui-icon material-icons">arrow_back</i>
        </div>
        <div slot="center" class="title">
          <div v-for="(item,index) in titles" class="title-item" :class="{active: index == currentIndex}"
            @click="titleclick(index)">{{item}}</div>
        </div>
      </NavBar>

      <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll">
        <!--商品轮播图-->
        <swiper :options="swiperOption" ref="mySwiper" class="swers-item">
          <swiper-slide v-for="item in topImages">
            <div><a :href="item.link"><img :src="item" class="swiperimgitem"></a></div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>

        <!--商品信息-->
        <div v-if="Object.keys(Goods).length !== 0" class="base-info">
          <div class="info-title">{{Goods.title}}</div>
          <div class="info-price">
            <span class="n-price">{{Goods.newPrice}}</span>
            <span class="o-price">{{Goods.oldPrice}}</span>
            <span class="discount">{{Goods.discount}}</span>
          </div>
          <div class="info-other">
            <span>{{Goods.columns[0]}}</span>
            <span>{{Goods.columns[1]}}</span>
            <span>{{Goods.services[Goods.services.length-1].name}}</span>
          </div>
          <div class="info-service">
            <span class="info-service-item" v-for="index in Goods.services.length-1" :key="index">
              <img :src="Goods.services[index-1].icon">
              <span>{{Goods.services[index-1].name}}</span>
            </span>
          </div>
        </div>

        <!--店铺信息-->
        <div class="shop-info">
          <div class="shop-top">
            <img :src="shop.logo">
            <span class="title">{{shop.name}}</span>
          </div>
          <div class="shop-middle">
            <div class="shop-middle-item shop-middle-left">
              <div class="info-sells">
                <div class="sells-count">
                  {{shop.sells | sellCountFilter}}
                </div>
                <div class="sells-text">总销量</div>
              </div>
              <div class="info-goods">
                <div class="goods-count">
                  {{shop.goodsCount}}
                </div>
                <div class="goods-text">全部宝贝</div>
              </div>
            </div>
            <div class="shop-middle-item shop-middle-right">
              <table>
                <tr v-for="(item, index) in shop.score" :key="index">
                  <td>{{item.name}}</td>
                  <td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
                  <td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高':'低'}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="shop-bottom">
            <div class="enter-shop">进店逛逛</div>
          </div>
        </div>

        <!--商品详细数据-->
        <div v-if="Object.keys(detailInfo).length !== 0" class="goods-info">
          <div class="info-desc clear-fix">
            <div class="start">
            </div>
            <div class="desc">{{detailInfo.desc}}</div>
            <div class="end"></div>
          </div>
          <div class="info-key">{{detailInfo.detailImage[0].key}}</div>
          <div class="info-list">
            <img v-for="(item, index) in detailInfo.detailImage[0].list" @load="imgLoad" :src="item" alt="">
          </div>
        </div>

        <!--商品参数-->
        <div ref="params" class="param-info" v-if="Object.keys(paramInfo).length !== 0">
          <table v-for="(table, index) in paramInfo.sizes" class="info-size" :key="index">
            <tr v-for="(tr, indey) in table" :key="indey">
              <td v-for="(td, indez) in tr" :key="indez">{{td}}</td>
            </tr>
          </table>
          <table class="info-param">
            <tr v-for="(info, index) in paramInfo.infos">
              <td class="info-param-key">{{info.key}}</td>
              <td class="param-value">{{info.value}}</td>
            </tr>
          </table>
          <div class="info-img" v-if="paramInfo.image.length !== 0">
            <img :src="paramInfo.image" alt="">
          </div>
        </div>

        <!--商品评论-->
        <div ref="comment" v-if="Object.keys(commentInfo).length !== 0" class="comment-info">
          <div class="info-header">
            <div class="header-title">用户评价</div>
            <div class="header-more">
              更多
              <i class="arrow-right"></i>
            </div>
          </div>
          <div class="info-user">
            <img :src="commentInfo.user.avatar" alt="">
            <span>{{commentInfo.user.uname}}</span>
          </div>
          <div class="info-detail">
            <p>{{commentInfo.content}}</p>
            <div class="info-other">
              <span class="date">{{commentInfo.created | showDate}}</span>
              <span>{{commentInfo.style}}</span>
            </div>
            <div class="info-imgs">
              <img :src="item" v-for="(item, index) in commentInfo.images">
            </div>
          </div>
        </div>

        <!--商品推荐-->
        <GoodsList ref="recommends" :goods="recommend"></GoodsList>
      </scroll>
      <!--返回顶部按钮-->
      <backTop @click.native="backTopclick()"></backTop>
      <!--底部工具栏-->
      <div class="bottom-nav">
        <div class="nav-left">
          <div class="item-left">
            <div class="icon">
              <img src="~@/assets/img/detail/detail_bottom.png" alt />
            </div>
            <div class="text" @click="currentDefend">{{title[0]}}</div>
          </div>
          <div class="item-center">
            <div class="icon">
              <img src="~@/assets/img/detail/detail_bottom.png" alt />
            </div>
            <div class="text" @click="currentDefend">{{title[1]}}</div>
          </div>
          <div class="item-right" @click="colleClick">
            <div class="icon">
              <img class="no-collection" :class="{collection:isColllection}"
                src="~@/assets/img/detail/detail_bottom.png" alt />
            </div>
            <div class="text">{{title[2]}}</div>
          </div>
        </div>
        <div class="nav-right">
          <button class="add" @click="addClick">{{title[3]}}</button>
          <button class="buy" @click="buyClick">{{title[4]}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  #detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .content {
    height: calc(100% - 44px);
    position: relative;
  }

  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

  .title {
    display: flex;

  }

  .title-item {
    flex: 1;
  }

  .active {
    color: darkmagenta;
  }

  .swers-item {
    height: 300px;
    overflow: hidden;
  }

  .base-info {
    margin-top: 15px;
    padding: 0 8px;
    color: #999;
    border-bottom: 5px solid #f2f5f8;
  }

  .info-title {
    color: #222
  }

  .info-price {
    margin-top: 10px;
  }

  .info-price .n-price {
    font-size: 24px;
    color: var(--color-high-text);
  }

  .info-price .o-price {
    font-size: 13px;
    margin-left: 5px;
    text-decoration: line-through;
  }

  .info-price .discount {
    font-size: 12px;
    padding: 2px 5px;
    color: #fff;
    background-color: var(--color-high-text);
    border-radius: 8px;
    margin-left: 5px;
    /*让元素上浮一些: 使用相对定位即可*/
    position: relative;
    top: -8px;
  }

  .info-other {
    margin-top: 15px;
    line-height: 30px;
    display: flex;
    font-size: 13px;
    border-bottom: 1px solid rgba(100, 100, 100, .1);
    justify-content: space-between;
  }

  .info-service {
    display: flex;
    justify-content: space-between;
    line-height: 60px;
  }

  .info-service-item img {
    width: 14px;
    height: 14px;
    position: relative;
    top: 2px;
  }

  .info-service-item span {
    font-size: 13px;
    color: #333;
  }

  .shop-info {
    padding: 25px 8px;
    border-bottom: 5px solid #f2f5f8;
  }

  .shop-top {
    line-height: 45px;
    /* 让元素垂直中心对齐 */
    display: flex;
    align-items: center;
  }

  .shop-top img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
  }

  .shop-top .title {
    margin-left: 10px;
    vertical-align: center;
  }

  .shop-middle {
    margin-top: 15px;
    display: flex;
    align-items: center;
  }

  .shop-middle-item {
    flex: 1;
  }

  .shop-middle-left {
    display: flex;
    justify-content: space-evenly;
    color: #333;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, .1);
  }

  .sells-count,
  .goods-count {
    font-size: 18px;
  }

  .sells-text,
  .goods-text {
    margin-top: 10px;
    font-size: 12px;
  }

  .shop-middle-right {
    font-size: 13px;
    color: #333;
  }

  .shop-middle-right table {
    width: 120px;
    margin-left: 30px;
  }

  .shop-middle-right table td {
    padding: 5px 0;
  }

  .shop-middle-right .score {
    color: #5ea732;
  }

  .shop-middle-right .score-better {
    color: #f13e3a;
  }

  .shop-middle-right .better span {
    background-color: #5ea732;
    color: #fff;
    text-align: center;
  }

  .shop-middle-right .better-more span {
    background-color: #f13e3a;
  }

  .shop-bottom {
    text-align: center;
    margin-top: 10px;
  }

  .enter-shop {
    display: inline-block;
    font-size: 14px;
    background-color: #f2f5f8;
    width: 150px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
  }

  .goods-info {
    padding: 20px 0;
    border-bottom: 5px solid #f2f5f8;
  }

  .info-desc {
    padding: 0 15px;
  }

  .info-desc .start,
  .info-desc .end {
    width: 90px;
    height: 1px;
    background-color: #a3a3a5;
    position: relative;
  }

  .info-desc .start {
    float: left;
  }

  .info-desc .end {
    float: right;
  }

  .info-desc .start::before,
  .info-desc .end::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #333;
    bottom: 0;
  }

  .info-desc .end::after {
    right: 0;
  }

  .info-desc .desc {
    padding: 15px 0;
    font-size: 14px;
  }

  .info-key {
    margin: 10px 0 10px 15px;
    color: #333;
    font-size: 15px;
  }

  .info-list img {
    width: 100%;
  }


  /* 商品参数 */
  .param-info {
    padding: 20px 15px;
    font-size: 14px;
    border-bottom: 5px solid #f2f5f8;
  }

  .param-info table {
    width: 100%;
    border-collapse: collapse;
  }

  .param-info table tr {
    height: 42px;
  }

  .param-info table tr td {
    border-bottom: 1px solid rgba(100, 100, 100, .1);
  }

  .info-param-key {
    /*当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度*/
    width: 95px;
  }

  .info-param {
    border-top: 1px solid rgba(0, 0, 0, .1);
  }

  .param-value {
    color: #eb4868
  }

  .info-img img {
    width: 100%;
  }


  /* 商品评论 */

  .comment-info {
    padding: 5px 12px;
    color: #333;
    border-bottom: 5px solid #f2f5f8;
  }

  .info-header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }

  .header-title {
    float: left;
    font-size: 15px;
  }

  .header-more {
    float: right;
    margin-right: 10px;
    font-size: 13px;
  }

  .info-user {
    padding: 10px 0 5px;
  }

  .info-user img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }

  .info-user span {
    position: relative;
    font-size: 15px;
    top: -15px;
    margin-left: 10px;
  }

  .info-detail {
    padding: 0 5px 15px;
  }

  .info-detail p {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
  }

  .info-detail .info-other {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }

  .info-other .date {
    margin-right: 8px;
  }

  .info-imgs {
    margin-top: 10px;
  }

  .info-imgs img {
    width: 70px;
    height: 70px;
    margin-right: 5px;
  }

  /* 底部工具栏 */
  .bottom-nav {
    height: 49px;
    width: 100%;
    position: absolute;
    bottom: -10px;
    border-top: 1px solid rgba(56, 55, 55, 0.1);
    background-color: #eee;
  }

  .nav-left {
    float: left;
    width: 45%;
    height: 49px;
    display: flex;
  }

  .nav-right {
    float: right;
    width: 55%;
    height: 49px;
    text-align: center;
    padding-top: 6px;
    font-size: 14px;
    color: #fff;
  }

  .item-left,
  .item-center,
  .item-right {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #333;
  }

  .icon {
    width: 20px;
    height: 20px;
    overflow: hidden;
    margin-left: 18px;
    margin-top: 6px;
    position: relative;
  }

  .item-left img {
    position: absolute;
    left: -0.2px;
    bottom: -69px;
  }

  .item-center img {
    position: absolute;
    left: 0;
    bottom: -28px;
  }

  .no-collection {
    position: absolute;
    left: 0;
    top: 1px;
  }

  .collection {
    position: absolute;
    left: 0;
    top: -24px;
  }

  .icon img {
    width: 20px;
  }

  .add,
  .buy {
    border: 0;
    padding: 8px 14px;
  }

  .add {
    border-radius: 20px 0px 0px 20px;
    outline: none;
    background-image: -webkit-gradient(linear,
        right bottom,
        left bottom,
        color-stop(0, #fd820e),
        color-stop(1, #ffcf1e));
  }

  .buy {
    border-radius: 0px 20px 20px 0px;
    outline: none;
    background-image: -webkit-gradient(linear,
        right bottom,
        left bottom,
        color-stop(0, #ef0c24),
        color-stop(1, #ff5f34));
  }
</style>

<script>
  import Scroll from 'components/scroll/scroll'
  import NavBar from 'components/navbar/NavBar'
  import { getDatail, Goods, Shop, GoodParam, getrecommend } from 'network/detail'
  import 'swiper/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { debounce, formatDate } from 'common/utils'
  import GoodsList from 'components/Goods/GoodsList'
  import { loadingMixin } from 'common/mixin'
  import backTop from 'components/backTop/backTop'
  import { mapActions } from 'vuex'

  export default {
    name: 'Detail',
    //传参：父传子，写法：["形参1"[,"形参2"]]
    props: {

    },
    //混入
    mixins: [loadingMixin],
    data() {
      return {
        iid: null,
        currentIndex: 0,
        titles: ['商品', '参数', '评论', '推荐'],
        res: null,
        topImages: [],
        // swiper轮播的参数           
        swiperOption: {
          // 滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
          // 上一张，下一张
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          //开启循环切换
          loop: true,
          //设置自动切换图片
          autoplay: true,
          //设置触碰后自动切换停止
          disableOnInteraction: true,
        },
        Goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        recommend: [],
        themeTopYs: [],
        title: ["客服", "店铺", "收藏", "加入购物车", "立即购买"],
        isColllection: false
      }
    },
    created() {
      //保存传入的iid
      this.iid = this.$route.params.iid
      //根据iid请求详细数据
      getDatail(this.iid).then(res => {
        this.res = res;
        //获取顶部图片轮播数据
        this.topImages = res.data.result.itemInfo.topImages;
        //获取商品信息
        this.Goods = new Goods(res.data.result.itemInfo, res.data.result.columns, res.data.result.shopInfo.services);
        //创建店铺信息的对象
        this.shop = new Shop(res.data.result.shopInfo)
        //保存商品的详细数据
        this.detailInfo = res.data.result.detailInfo
        //获取商品参数
        this.paramInfo = new GoodParam(res.data.result.itemParams.info, res.data.result.itemParams.rule)
        //获取评论信息
        if (res.data.result.rate.cRate !== 0) {
          this.commentInfo = res.data.result.rate.list[0]
        }
      })
      //请求推荐数据
      getrecommend().then(res => {
        this.recommend = res.data.data.list;
      })
      this.$nextTick(() => {
        //隐藏loading
        setTimeout(() => {
          this.isShowLoading = false;
        }, 50)
      })
    },
    mounted() {


    },
    //过滤器
    filters: {
      //时间格式化
      showDate(value) {
        const date = new Date(value * 1000);
        return formatDate(date, 'yyyy-MM-dd hh-mm');
      },
      sellCountFilter(value) {
        return value;
      }
    },
    updated() {


    },
    methods: {
      ...mapActions([
        'addCart'
      ]),
      //点击标题栏 商品、参数、评论、推荐 按钮
      titleclick(index) {
        this.currentIndex = index;
        this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 300)
      },
      //点击返回按钮
      backclick() {
        this.$router.back();
      },
      //加载图片
      imgLoad() {
        const refresh = debounce(this.$refs.scroll.refresh, 200)
        refresh();
        //获取 商品、参数、评论、推荐 所对应的位置
        const getThemeTopY = debounce(() => {
          this.themeTopYs = [];
          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.params.offsetTop);
          this.themeTopYs.push(this.$refs.comment.offsetTop);
          this.themeTopYs.push(this.$refs.recommends.$el.offsetTop);
        }, 200)
        getThemeTopY()
      },
      //监听滚动条
      contentScroll(position) {
        const positionY = -position.y;
        const length = this.themeTopYs.length;
        for (let i in this.themeTopYs) {
          i *= 1;
          if (
            (this.currentIndex !== i &&
              i < length - 1 &&
              positionY >= this.themeTopYs[i] &&
              positionY < this.themeTopYs[i + 1]) ||
            (this.currentIndex !== i &&
              i === length - 1 &&
              positionY >= this.themeTopYs[i])
          ) {
            this.currentIndex = i;
          }
        }
      },
      //点击收藏按钮
      colleClick() {

      },
      //点击购物车按钮（购物车1）
      addClick() {
        //获取商品信息
        const product = {}
        product.image = this.topImages[0];
        product.title = this.Goods.title;
        product.desc = this.Goods.desc;
        product.price = this.Goods.realprice;
        product.iid = this.iid;
        //增加到购物车
        /* this.$store.dispatch('addCart',product).then(res =>{
          console.log(res);
        }) */

        this.addCart(product).then(res => {
          //显示提示
          this.$toast.show(res,2000);
        })
      },
      //点击跳转购物车
      buyClick() {

      },
      //维护中···
      currentDefend() {
        this.$toast.show('本功能维护中', 2000);

      },
      backTopclick() {
        this.$refs.scroll.scrollTo(0, 0, 500)
      },

    },
    components: {
      Scroll,
      NavBar,
      swiper,
      swiperSlide,
      GoodsList,
      backTop,

    },
  }
</script>